<template>
	<view class="container">
		<!-- 收支总览卡片 -->
		<view class="overview-card">
			<view class="overview-item">
				<text class="label">本月收入</text>
				<text class="amount income">¥{{monthlyIncome}}</text>
			</view>
			<view class="overview-item">
				<text class="label">本月支出</text>
				<text class="amount expense">¥{{monthlyExpense}}</text>
			</view>
			<view class="overview-item">
				<text class="label">本月结余</text>
				<text class="amount balance">¥{{balance}}</text>
			</view>
		</view>
		
		<!-- 最近记录列表 -->
		<view class="recent-section">
			<view class="section-title">最近记录</view>
			<view v-if="recentRecords.length === 0" class="empty-tip">暂无记录</view>
			<view v-else>
				<view v-for="(record, index) in recentRecords" :key="index" class="record-item">
					<view class="record-main">
						<text class="record-type">{{record.type}}</text>
						<text class="record-date">{{record.date}}</text>
					</view>
					<view class="record-amount" :class="record.amount > 0 ? 'income' : 'expense'">
						{{record.amount > 0 ? '+' : ''}}¥{{record.amount}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthlyIncome: 0,
				monthlyExpense: 0,
				balance: 0,
				recentRecords: []
			}
		},
		onShow() {
			this.loadData()
		},
		methods: {
			loadData() {
				const records = uni.getStorageSync('records') || []
				// 计算本月收入、支出、结余
				const now = new Date()
				const ym = now.toISOString().slice(0,7)
				let income = 0, expense = 0
				const monthRecords = records.filter(r => r.date && r.date.startsWith(ym))
				monthRecords.forEach(r => {
					if (r.amount > 0) income += r.amount
					else expense += Math.abs(r.amount)
				})
				this.monthlyIncome = income
				this.monthlyExpense = expense
				this.balance = income - expense
				// 最近记录（按日期倒序，取前5条）
				this.recentRecords = records
					.slice()
					.sort((a, b) => (b.date || '').localeCompare(a.date || ''))
					.slice(0, 5)
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.overview-card {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}

	.overview-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.amount {
		font-size: 36rpx;
		font-weight: bold;
	}

	.income {
		color: #4cd964;
	}

	.expense {
		color: #ff3b30;
	}

	.balance {
		color: #007aff;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.recent-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}

	.empty-tip {
		color: #999;
		text-align: center;
		padding: 40rpx 0;
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-main {
		display: flex;
		flex-direction: column;
	}

	.record-type {
		font-size: 28rpx;
		color: #333;
	}

	.record-date {
		font-size: 24rpx;
		color: #999;
	}

	.record-amount {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>
